<template>
  <div class="film-list">
    <FilmItem
      v-for="item in filmList"
      :key="item.filmId"
      :filmInfo="item"
      filmType="comingSoon">
    </FilmItem>
     <div class="film-list__loadmore" v-show="loading">
      <mt-spinner type="fading-circle"></mt-spinner>
      <span>加载中...</span>
    </div>
    <div class="film-list__loadmore" v-show="noMore">
      <span>别拉了，到底了...</span>
    </div>
  </div>
</template>

<script>
import FilmItem from '../../components/FilmItem'
import { Spinner } from 'mint-ui'
import { getBannerList2 } from '@/api/film'
export default {
  name: 'ComingSoon',
  components: {
    FilmItem,
    [Spinner.name]: Spinner
  },
  inject: ['home'],
  data () {
    return {
      filmList: [],
      loading: false,
      noMore: false,
      pageNum: 0,
      pageSize: 10,
      totalPages: 1
    }
  },
  methods: {
    onScroll (event) {
      let scrollTop = event.target.scrollTop // 滚动条距离顶部的距离
      let clientHeight = event.target.clientHeight // 滚动元素的可视高度
      let scrollHeight = event.target.scrollHeight // 滚动元素的内容高度
      console.log(6)
      if (scrollHeight - clientHeight <= scrollTop && !this.loading) {
        // 滚动到底了

        if (this.pageNum >= this.totalPages) {
          this.noMore = true
          return
        }

        // 页数加一
        this.pageNum++
        this.getFilmList()
      }
    },
    getFilmList () {
      console.log(7)
      this.loading = true
      getBannerList2({
        cityId: 440300,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: 2,
        k: 6236088
      }).then(response => {
        let res = response.data
        if (res.status === 0) {
          console.log(res.data.films)
          this.filmList = [...this.filmList, ...res.data.films]
          this.totalPages = Math.ceil(res.data.total / this.pageSize)
          this.loading = false
        }
      })
    }
  },
  created () {
    this.getFilmList()
  },
  mounted () {
    this.home.$refs['myView'].addEventListener('scroll', this.onScroll)
  },
  beforeDestroy () {
    this.home.$refs['myView'].removeEventListener('scroll', this.onScroll)
  }
}
</script>

<style lang="scss">
@import './film-list.scss';
</style>
